<template>
  <div class="below">
          <ul class="reating-ul" v-for="(item,index) in reating" :key="index">
              <li class="reating-list">
                  <div class="area">
                      <div class="left"><img class="img" width="30px" height="30px" :src="item.avatar" alt=""></div>
                      <div class="right">
                          <div class="top-header">
                          <div class="name">{{item.username}}</div>
                          <div class="rating-time">{{format(item.rateTime)}}</div>
                          </div>
                          <div class="star"><span class="delvertime">{{item.deliveryTime}}分钟送达</span></div>
                          <div class="detail">{{item.text}}</div>
                          <div class="tab-option">
                              <ul class="option-ul" v-for="(item,index) in item.recommend" :key="index">
                                  <li class="option-li"><span>{{item}}</span></li>
                              </ul>
                          </div>
                      </div>
                  </div>
              </li>
          </ul>
      </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'ReatingSelect',
  props: {
    reating: {
      type: Array
    }
  },
  methods: {
    format (time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style lang="scss" scoped>
    .below{
        //    height: 250px;
        //    overflow: hidden;
           .reating-ul{
              .reating-list{
                .area{
                    padding: 18px;
                    display: flex;
                    .left{
                      .img{
                          border-radius: 50%;
                      }
                    }
                    .right{
                        line-height: 20px;
                        margin-left: 12px;
                       .top-header{
                           display: flex;
                           justify-content: space-between;
                          .name{
                            font-size: 16px;
                           }
                           .rating-time{
                               color: darkgray;
                           }
                       }
                       .star{
                          .delvertime{}
                       }
                       .detail{}
                       .tab-option{
                           display: flex;
                           flex-wrap: wrap;
                          .option-ul{
                            //   display: flex;
                            margin: 2px 2px;
                            border: 1px solid darkgray;
                            padding: 2px 4px;
                            .option-li{
                                font-size: 12px;
                                color: rgb(134, 133, 131);
                            }
                          }
                       }
                    }
                }
              }
           }
       }
</style>
